<template>
  <div class="box" v-loading="loading">
    <!-- 导航 -->
    <div class="title">
      <span class="el-icon-arrow-left" @click="$router.go(-1)"></span>
      {{ $t('Add Card') }}
    </div>
    <!-- 卡片 -->
    <div class="card">
      <div class="card_title">
        <img src="../../../../assets/static/recharge/q4.png" alt=""/>
        <div>{{ $t('Card Name') }}</div>
      </div>
      <div class="card_num">
        <div>
          <img src="../../../../assets/static/addCard/a2.png" alt="">
          <input @input="cardFormat" v-model="info.card"/>
        </div>
        <div>{{ $t('We do not charge any fees when you use Visa or debit card.') }}</div>
      </div>
    </div>
    <!-- 保存 -->
    <div class="save" @click="bind_user_bank_pay">
      {{ $t('home.Save') }}
    </div>
    <div class="info">
      {{ $t('By adding a card, you have read and accepted our agreements and terms.') }}
    </div>
  </div>
</template>

<script>
import {addBankCard, bankCardList} from '@/api/merbership/member'
import {govlist} from '@/api/merbership/userbank'
import '@/styles/flax.css'
import '@/styles/elInput.scss'
import {create_recharge, bind_user_bank_pay} from '@/api/merbership/userpay'

export default {
  data() {
    return {
      info: {
        card: '',
        bank_id: '1',
        state_id: '1',
        over_time: '',
        cvv: ''
      },
      cardNum: 0,
      countryList: [],
      loading: false
    }
  },
  activated() {
    this.govlist()
    this.loading = false
  },
  methods: {
    /**
     * 卡片格式
     */
    cardFormat() {
      // this.info.card = this.info.card.replace(/[^\d]/g, '')
    },
    /**
     * 拼接过期时间
     */
    makeOverTime() {
      this.info.over_time = this.timeStr1 + this.timeStr2 + this.timeStr3
    },
    // ---------------- axios ---------------------------
    /**
     * 充值1元绑定银行卡
     */
    bind_user_bank_pay() {
      this.loading = true
      const pd = {
        card_number: this.info.card
      }
      this.$message.info('请稍后')
      bind_user_bank_pay(this.$qs.stringify(pd))
        .then(res => {
          // this.loading = false
          if (res.data.code === 1) {
            window.location.replace(res.data.data)
            // this.create_recharge()
          } else {
            this.loading = false
            this.$message.error(res.data.msg)
          }
        })
    },
    /**
     * 银行卡列表
     */
    bankCardList() {
      const pd = {}
      bankCardList(this.$qs.stringify(pd))
        .then(res => {
          this.cardNum = res.data.data.list.length
        })
    },
    /**
     * 充值
     */
    create_recharge() {
      const pd = {
        money: 1,
        user_bank_id: this.cardNum + 1,
        name: this.info.card
      }
      this.$message.info('请稍后')
      create_recharge(this.$qs.stringify(pd))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            window.location.replace(res.data.data)
            // window.open(res.data.data, '_blank')
            // this.addBankCard()
          } else {
            this.$message.error(res.data.msg)
          }
          // console.log(res.data.data)
        })
    },
    /**
     * 银行卡国家接口
     */
    govlist() {
      const pd = {}
      govlist(pd)
        .then(res => {
          this.countryList = res.data.data
        })
    },
    /**
     * 添加银行卡
     */
    addBankCard() {
      // if (this.info.card.length < 8) {
      //   this.$message.error('请输入正确的银行卡号')
      //   return ''
      // }
      addBankCard(this.$qs.stringify(this.info))
        .then(res => {
          if (res.data.code === 1) {
            this.$message.success(res.data.msg)
            this.$router.go(-1)
          } else {
            this.$message.error(res.data.msg)
          }
        })
    }
  }
}
</script>
<style>
.countryFlag {
  width: 32px;
  height: 18px;
}

/*.el-select .el-input.is-focus .el-input__inner {*/
/*  border-color: transparent;*/
/*  outline: none;*/
/*}*/

/*.el-select .el-input .el-select__caret {*/
/*  display: none;*/
/*}*/

/*.el-input__inner {*/
/*  appearance: none;*/
/*  width: 240px;*/
/*  border-color: transparent;*/
/*  outline: none;*/
/*  box-shadow: transparent;*/
/*}*/

/*.el-select:hover .el-input__inner {*/
/*  border-color: transparent;*/
/*  outline: none;*/
/*}*/

/*.el-select:focus .el-input__inner {*/
/*  border-color: transparent;*/
/*  outline: none;*/
/*}*/
</style>
<style scoped>
input {
  width: 60%;
  border-color: transparent;
  outline: none;
}

.box {
  background-color: #f5f5f5;
}

.title {
  background-color: #7ac91b;
  color: #fff;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-weight: bold;
}

.title .el-icon-arrow-left {
  float: left;
  margin-top: 5px;
}

/* 卡片 */
.card {
  margin: 15px;
  background-color: #fff;
  padding: 12px;
  border-radius: 10px;
}

/* card 标题 */
.card_title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
}

.card_title div {
  margin-left: 13px;
}

/* 卡号 */
.card_num {
  color: #66C107;
  font-size: 11px;
}

.card_num > div:nth-child(1) {
  display: flex;
  align-items: center;
  width: 96% !important;
  box-shadow: 0 0 5px #ccc;
  margin: 10px 0;
  border-radius: 10px;
  padding: 5px;
}

.card_num img {
  width: 33px;
  margin-top: 5px;
}

/* 到期日 */
.expire {
  margin: 15px 0;
}

.expire_card {
  padding: 5px 10px;
  color: #999999;
  font-size: 11px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  margin: 10px 0;
}

.expire_card_back {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.expire_card_back div {
  padding: 10px;
  color: #999999;
  font-size: 11px;
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  width: 100%;
}

/* 发卡国家 */
.launchCard_card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
}

.launchCard_card img {
  width: 31px;
  vertical-align: top;
  margin-right: 7px;
}

.launchCard_card > div:nth-child(2) {
  color: #64BD1F;
}

/* launchCard_state */
.launchCard_info {
  color: #64BD1F;
  text-align: center;
  padding-bottom: 15px;
}

.launchCard_title {
  font-size: 14px;
  margin: 12px 0;
  font-weight: bold;
}

.launchCard_list {
  background-color: rgba(99, 190, 32, 0.3);
  padding: 10px;
  border-radius: 10px;
  font-size: 12px;
}

/* 保存*/
.save {
  margin: 55px;
  background-image: linear-gradient(to right, #FED000, #FFB200);
  text-align: center;
  padding: 15px;
  color: #fff;
  border-radius: 10px;
}

.info {
  font-size: 12px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 40px;
}

.expire .row-wrapper {
  display: flex;
  justify-content: space-between;
}

.expire .row-wrapper > div {
  width: 45%;
}
</style>
